<template>
  <div>
    <vue-ueditor-wrap
      v-model="contents"
      :config="myConfig"
      style="width: 100%;"
      @beforeInit="addCustomDialog"
    >
    </vue-ueditor-wrap>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'UeditorFrom',
  scrollerHeight: {
    content: String,
    default: ''
  },
  props: {
    content: {
      type: String,
      default: ''
    },
    value: {}
  },
  data() {
    return {
      contents: this.content,
      myConfig: {
        autoHeightEnabled: false, // 编辑器不自动被内容撑高
        initialFrameHeight: 560, // 初始容器高度
        initialFrameWidth: '100%', // 初始容器宽度
        UEDITOR_HOME_URL: process.env.NODE_ENV === 'development' ? '/UEditor/' : `.${this.customRouter || ''}/UEditor/`, // UEditor资源文件的存放路径
        serverUrl: ''
      }
    }
  },
  computed: {
    ...mapGetters({
      customRouter: 'customRouter'
    })
  },
  watch: {
    // 监听内容改变
    content: function(val) {
      this.contents = this.content
    },
    contents: function(val) {
      this.$emit('input', val)
    }
  },
  beforeMount() {
    // 接收 v-model 数据
    if (this.value) {
      this.contents = this.value
    }
  },
  methods: {
    // 添加文本编辑器自定义弹窗
    addCustomDialog(editorId) {
      const _this = this;
      window.UE.registerUI('dialogImg', function(editor, uiName) {
        const dialog = new window.UE.ui.Dialog({
          // 指定弹出层中页面的路径,这里只能支持页面
          iframeUrl: process.env.NODE_ENV === 'development' ? `/#${_this.customRouter}/setting/uploadPicture?field=dialog&type=2` : `${window.location.origin + window.location.pathname}#${_this.customRouter}/setting/uploadPicture?field=dialog&type=2`,
          // 需要指定当前的编辑器实例
          editor: editor,
          // 指定dialog的名字
          name: uiName,
          // dialog的标题
          title: '上传图片',
          // 指定dialog的外围样式
          cssRules: 'width:1000px;height:500px;padding:20px;'
        })
        _this.dialog = dialog
        const btn = new window.UE.ui.Button({
          name: 'dialog-button',
          title: '上传图片',
          cssRules: `background-image: url(@/assets/images/icons.png);background-position: -726px -77px;`,
          onclick: function() {
            dialog.render()
            dialog.open()
          }
        })
        return btn
      }, 37, editorId);

      /*window.UE.registerUI('video-dialog', function(editor, uiName) {
        const dialog = new window.UE.ui.Dialog({
          iframeUrl: '/#${_this.customRouter}/setting/video/index.html?fodder=video',
          editor: editor,
          name: uiName,
          title: '上传视频',
          cssRules: 'width:1000px;height:500px;padding:20px;'
        })
        _this.dialog = dialog
        const btn = new window.UE.ui.Button({
          name: 'video-button',
          title: '上传视频',
          cssRules: `background-image: url(@/assets/images/icons.png);background-position: -320px -20px;`,
          onclick: function() {
            // 渲染dialog
            dialog.render()
            dialog.open()
          }
        })
        return btn
      }, 37)*/
    }
  }
}
</script>

<style lang="scss" scope>
  .el-form-item__content {
    line-height: normal;
  }
</style>
